<template>
    <el-menu  
      default-active="0" 
      router 
      class="el-menu-vertical-demo elmenu" 
      unique-opened
      @open="handleOpen" 
      @close="handleClose">     
          <el-submenu v-for="(item,index) in menuData" :index="index+'0'" :key="index">
            <template v-if="item.isHide==false">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.name}}</span>
              </template>

              <el-menu-item v-for="(subitem,subindex) in item.children" 
                    :index="subitem.url" 
                    :key="subindex">{{subitem.name}}</el-menu-item>

              </template>
            <!-- <el-menu-item index="1-4-1">选项1-1</el-menu-item>
            <el-menu-item index="1-4-1">选项1-2</el-menu-item> -->
          </el-submenu>
        </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          id: '100', name: '表单流程-Demo', icon: '', url: '', children: [
            { id: 101, name: '流程设计', icon: '', url: '/demo/bpmn' },
            { id: 102, name: '表单设计', icon: '', url: '/demo/vform' },
          ],isHide:true
        },{
          id: '200', name: '权限管理', icon: '', url: '', children: [
            { id: 201, name: '用户列表', icon: '', url: '/rbac/user' },
            { id: 202, name: '角色列表', icon: '', url: '/rbac/role' },
            { id: 204, name: '角色列表(按钮)', icon: '', url: '/rbac/role/button' },
            { id: 203, name: '菜单列表', icon: '', url: '/rbac/menu' },
          ],isHide:false
        },{
          id: '300', name: '员工管理', icon: '', url: '', children: [
            { id: 301, name: '员工列表', icon: '', url: '/employee/list' },
            { id: 302, name: '员工分析', icon: '', url: '/employee/fx' },
          ],isHide:false
        },{
          id: '400', name: '模拟考试', icon: '', url: '', children: [
            { id: 401, name: '月考模拟', icon: '', url: '/demo/exam/month' },
          ],isHide:true
        }
      ],
    }
  },
  mounted(){
    this.onLoadMenu()
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    onLoadMenu(){
      let url=this.$baseUrl + 'menu'
      this.$http.get(url).then(res=>{
        this.menuData.push(res.data)
      })
    }
  }
}
</script>

<style scoped>
.elmenu{
  height:100%;
  text-align: left;
}
.elmenu>ul>li{
  padding-left: 50px;
}
</style>